<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="province.js"></script>
    <script>
        function $(id){
            return document.getElementById(id);
        }

        window.onload = function (){
            var proviceStr = "";
            provinceArray.forEach(n => {
                proviceStr += `<option value="${n.code}">${n.name}</option>`;
            });
            $("provinceSelect").innerHTML = proviceStr;
            findCity();
        }

        function findCity(){
            //得到选择省份的编号
            var pid = $("provinceSelect").value;
            //筛选省份id是指定值的城市
            var carray = cityArray.filter(n => n.proviceId == pid);
            //将符合条件的数组填充第二个下拉框
            var cityStr = "";
            carray.forEach(n =>{
                cityStr += `<option value="${n.code}">${n.name}</option>`;
            });
            $("citySelect").innerHTML = cityStr;
        }
    </script>
</head>
<body>
    <select id="provinceSelect" onchange="findCity()"></select>
    <select id="citySelect"></select>
</body>
</html>